<template>
	<el-dialog v-model="props.showDialog" :show-close="false" width="30%" @close="close">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass">充值</h4>
				<el-icon class="el-icon--left" @click="close">
					<CloseBold />
				</el-icon>
			</div>
		</template>
		<div class="item" @click="toC2c">
			<div>
				<img src="/header/recharge-c2c.svg" alt="">
			</div>
			<div>
				<p>C2C交易</p>
				<p>点对点交易，价格从优，支持多种本地支付方式。</p>
			</div>
		</div>
		<div class="item" @click="toDigitalCurrency">
			<div>
				<img src="/header/recharge-number.svg" alt="">
			</div>
			<div>
				<p>数字货币充值</p>
				<p>向您的欧神账户充值数字货币。</p>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import useJump from '@/utils/jump';
const { jumpTo } = useJump();

interface IProps {
	showDialog: boolean;
}

const props = defineProps<IProps>();

const emits = defineEmits(['close']);
const toDigitalCurrency = () => {
	close();
	jumpTo('/digitalCurrency');
}


const toC2c = () => {
	close();
	jumpTo('/transaction/c2c/quick');
}

const close = () => {
	emits('close', false);
}
</script>
<style lang="scss" scoped>
.my-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}


.item {
	display: flex;
	background: #FFFFFF;
	border-radius: 8px 8px 8px 8px;
	border: 1px solid #E5E6EB;
	padding: 20px;
	margin-top: 20px;
	align-items: center;

	>div:nth-child(1) {
		margin-right: 15px;
	}

	>div:nth-child(2) {
		>p:nth-child(1) {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 18px;
			color: #20232A;
		}

		>p:nth-child(2) {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 14px;
			margin-top: 8px;
			color: #86909C;
		}
	}
}
</style>
